<template>
	<view class="gaview">
		<view :style="gstyle" v-for="(user,k) in users">
			<image v-if="user.avatar" :src="user.avatar" :style="gstyle"></image>
			<view :style="gstyle"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				gstyle: {
					width:'0px',
					height:'0rpx'
				},
				list: []
			}
		},
		watch:{
			users:function(){
				const size = this.users.length
				this.list = this.users
				if (size <= 4) {
				
					for (let i = 0; i < 4 - size; i++) {
						this.list.push({
							avatar: ""
						})
					}
					this.gstyle = {
						width: "40rpx",
						height: "40rpx",
						borderRadius: "6rpx"
					}
				} else if (size <= 9) {
					for (let i = 0; i < 9 - size; i++) {
						this.list.push({
							avatar: ""
						})
					}
					this.gstyle = {
						width: "28rpx",
						height: "28rpx",
						borderRadius: "4rpx"
					}
				}else if (size <= 16) {
					for (let i = 0; i < 16 - size; i++) {
						this.list.push({
							avatar: ""
						})
					}
					this.gstyle = {
						width: "20rpx",
						height: "20rpx",
						borderRadius: "4rpx"
					}
				}else{
					this.list = this.users.filter((e,k)=>k < 16)
					this.gstyle = {
						width: "20rpx",
						height: "20rpx",
						borderRadius: "4rpx"
					}
				}
			}
		},
		mounted() {
			const size = this.users.length
			this.list = this.users
			if (size <= 4) {

				for (let i = 0; i < 4 - size; i++) {
					this.list.push({
						avatar: ""
					})
				}
				this.gstyle = {
					width: "40rpx",
					height: "40rpx",
					borderRadius: "6rpx"
				}
			} else if (size <= 9) {
				for (let i = 0; i < 9 - size; i++) {
					this.list.push({
						avatar: ""
					})
				}
				this.gstyle = {
					width: "28rpx",
					height: "28rpx",
					borderRadius: "4rpx"
				}
			}else if (size <= 16) {
				for (let i = 0; i < 16 - size; i++) {
					this.list.push({
						avatar: ""
					})
				}
				this.gstyle = {
					width: "20rpx",
					height: "20rpx",
					borderRadius: "4rpx"
				}
			}else{
				this.list = this.users.filter((e,k)=>k < 16)
				this.gstyle = {
					width: "20rpx",
					height: "20rpx",
					borderRadius: "4rpx"
				}
			}
		},
		props: {
			users: {
				type: Array,
				default: () => {
					return []
				}
			}
		}
	}
</script>

<style scoped>
	.gaview {
		width: 95rpx;
		height: 95rpx;
		display: flex;
		flex-wrap: wrap;
		padding: 5rpx;
		background: #d0d1de66;
		border-radius: 8rpx;
		justify-content: space-between;
	}
</style>